<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/9/2
  Time: 下午8:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>转账记录</title>
    <script src="js/jquery-1.8.0.min.js"></script>
    <link rel="stylesheet" href="css/layui.css" media="all">
    <script src="js/layui.js"></script>
</head>
<body>
<form class="layui-form" action="">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">付款人姓名</label>
            <div class="layui-input-inline">
                <select name="payname" id="payname" lay-filter="aihao">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">收款人姓名</label>
            <div class="layui-input-inline">
                <select name="coname" id="coname" lay-filter="aihao">
                    <option value="0">请选择</option>
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">验证日期</label>
            <div class="layui-input-inline">
                <input type="text" name="time" id="date"  placeholder="yyyy-MM-dd" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-inline">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <a type="submit" class="layui-btn" lay-submit="" id="submit" lay-filter="demo1">查询</a>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                </div>
            </div>
        </div>
    </div>
</form>
<table id="demo" lay-filter="test"></table>
<script>
    layui.use(['table', 'layer', 'form'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var form = layui.form;
        //第一个实例
      var tableIns=table.render({
            elem: '#demo'
            , height: 312
            , url: 'ucx' //数据接口
            , page: true
            , limits: [5, 10, 20]
            , limit: 6//开启分页
            , cols: [[ //表头
                {field: 'id', title: '编号', width: 80, sort: true, fixed: 'left'}
                , {field: 'fname', title: '付款人姓名', width: 80}
                , {field: 'sname', title: '收款人姓名', width: 80, sort: true}
                , {field: 'smcp', title: '收款人银行卡号', width: 150}
                , {
                    field: 'ttime', title: '转账时间', width: 177, templet: function (d) {
                        console.log(d.LAY_INDEX); //得到序号。一般不常用
                        console.log(d.LAY_COL); //得到当前列表头配置信息（layui 2.6.8 新增）。一般不常用
                        console.log(d.ttime)
                        //得到当前行数据，并拼接成自定义模板
                        return new Date(d.ttime).toLocaleString()
                    }
                }
                , {field: 'zb', title: '转账金额', width: 80, sort: true}
            ]], parseData: function (res) {
                return {
                    "code": 0,
                    "msg": "请求成功",
                    "count": res.nums, //解析数据长度
                    "data": res.data //解析数据列表
                }
            }
        });
        form.on('submit(demo1)', function (data) {
            console.log(data.field)
            var selectedPayName = $('#payname').val();
            var selectedCoName = $('#coname').val();
            var selectedDate = $('#date').val();

            tableIns.reload({
                url: 'ucx', // 确保URL正确
                where: {
                    payname: selectedPayName,
                    coname: selectedCoName,
                    date: selectedDate
                },
                page: {
                    curr: 1 // 刷新到第一页
                }
            });
            return false;
        });
        $.getJSON("cx", function (data) {
            $(data).each(function (index, v) {
                $("#payname").append("<option value='" + v.name + "'>" + v.name + "</option>");
                $("#coname").append("<option value='" + v.name + "'>" + v.name + "</option>");
            });
            form.render('select');
        });
    });
</script>
<%--<form action="<%=request.getContextPath()%>/ucx" id="aaa">--%>
<%--    <h3>转账记录</h3>--%>
<%--    <table border="1" >--%>
<%--        <tr>--%>
<%--            <th>编号</th>--%>
<%--            <th>付款人姓名</th>--%>
<%--            <th>收款人姓名</th>--%>
<%--            <th>收款人银行卡号</th>--%>
<%--            <th>转账时间</th>--%>
<%--            <th>转账余额</th>--%>
<%--        </tr>--%>
<%--    </table>--%>
<%--</form>--%>
<%--<script>--%>
<%--    $(function () {--%>
<%--        $.getJSON("<%=request.getContextPath()%>/ucx", $("#aaa").serialize(), shoeew)--%>
<%--    })--%>
<%--    function shoeew(da) {--%>
<%--        $(da).each(function (index, v) {--%>
<%--            $("table").append("<tr>" +--%>
<%--                "<th>" + v.id + "</th>" +--%>
<%--                "<th>" + v.fname + "</th>" +--%>
<%--                "<th>" + v.sname + "</th>" +--%>
<%--                "<th>" + v.smcp + "</th>" +--%>
<%--                "<th>" + v.ttime + "</th>" +--%>
<%--                "<th>" +v.zb +"余额</th>" +--%>
<%--                "</tr>")--%>
<%--        })--%>
<%--    }--%>
<%--</script>--%>
</body>
</html>
